<template>
	<div class="execution-code" v-if="state.trigger_code_gray">
		<div class="code-form-item">
			<div class="title">
				<div class="title-text">执行代码</div>
				<el-button type="text" @click="openCodeHelp">编码规范及使用帮助</el-button>
			</div>
			<div class="code-editor">
				<action-codemirror :value.sync="state.currentNodeInfoFront.options.fieldOptions.convertCode" v-if="state.trigger_code_gray"></action-codemirror>
			</div>
		</div>
	</div>
</template>

<script>
import actionCodemirror from '@src/modules/connector/view/setting/components/workflow/components/drawers/actionCodemirror.vue';
import state from '@src/modules/trigger/view/setting/util/state.js'
import { executeCode } from '@src/modules/connector/util/sampleCode.ts'

export default {
	name: "ExecutionCode",
    computed: {
        state() {
            return state;
        },
    },
    created() {
        this.init();
    },
	components: {
		actionCodemirror,
	},
	methods: {
		// 打开编码规范及使用帮助
        openCodeHelp() {
            window.open('https://doc.shb.ltd/shb_xoqazk/ia4qctp2ly559d1m/gre7yumc5sz4ewod/dklg7gkm64cya8l4/ox8c8k8i3hp1g6do.html');
        },
        init() {
            if (state.data?.changeOpenPanel && !Object.keys(state.currentNodeInfoFront.options?.fieldOptions || {}).includes('convertCode')) {
                this.$set(state.currentNodeInfoFront, 'options', {
					...state.currentNodeInfoFront.options,
					apiId: 'code',
					fieldOptions: {
						...state.currentNodeInfoFront.options.fieldOptions,
						convertCode: executeCode,
					}
                })
            }
        },
	},
};
</script>

<style lang="scss" scoped>
.execution-code {
	padding: 20px;
	.code-form-item {
		// margin-bottom: 20px;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
            &-text {
                font-weight: 600;
            }
		}
		.code-editor {
			height: calc(100vh - 245px);
			.action-app-codemirror {
				height: inherit;
			}
		}
	}
}
</style>